<template>
  <nav class="footer-nav">
    <div class="flex">
      <router-link
          to="/"
          class="footer-nav-item"
          :class="{ active: $route.name === 'Home' }"
      >
        <i class="fas fa-home text-lg mb-1"></i>
        <span>首页</span>
      </router-link>

      <router-link
          to="/discover"
          class="footer-nav-item"
          :class="{ active: $route.name === 'Discover' }"
      >
        <i class="fas fa-compass text-lg mb-1"></i>
        <span>发现</span>
      </router-link>

      <router-link
          to="/orderList"
          class="footer-nav-item"
          :class="{ active: $route.name === 'OrderList' }"
      >
        <i class="fas fa-file-text text-lg mb-1"></i>
        <span>订单</span>
      </router-link>

      <router-link
          to="/login"
          class="footer-nav-item"
          :class="{ active: $route.name === 'Login' || $route.name === 'Register' }"
      >
        <i class="fas fa-user text-lg mb-1"></i>
        <span>我的</span>
      </router-link>
    </div>
  </nav>
</template>

<script setup lang="ts">
// Footer navigation component
</script>